import React, { useEffect, useState } from 'react'

import './index.css'
/**
 * 实现效果：选项卡切换
 * 1. 使用React.chilren方法
 * 2. 测试能不能使用简单的数组 map 方法
 */
const TabPlane = ({children}) => {
  return <div>
    {children}
  </div>
}

const Tabs = ({children, activeIndex, onChange}) => {
  const [currentIndex, setCurrentIndex] = useState(1)
  useEffect(() => {
    if (activeIndex) {
      setCurrentIndex(activeIndex)
    }
  }, [activeIndex])

  const tabClick = (key) => {
    if (key === currentIndex) {
      return
    }
    setCurrentIndex(key)

    onChange(key)
  }

  return <div className="card">
    <div className="topclick">
      {React.Children.map(children, (element, index)=>{
        console.log(element, 'element')
        const { name } = element.props
        return <div style={{color: currentIndex == element.key ? '#7893f7' : ''}} onClick={() => tabClick(element.key)}>{name}</div>
      })}
    </div>
    <div className="tabContainer">
      {React.Children.map(children, (element, index)=>{
        const { children } = element.props
        return <div className={currentIndex == element.key ? 'block' : 'none'}>{children}</div>
      })}
    </div>
  </div>
}

export { Tabs, TabPlane }